import React from 'react'
import {Table, Icon,Button,message} from 'antd'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch'
import config from "../../assets/config"
export default class myTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:false
        }
    }
    getApplylist(){
        this.setState({loading:true})
        fetch(config.base+"apply/list/pending",{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                let json = [];
                for (let i = 0; i < rep.length; i++) {
                    json.push({
                        key: rep[i].id,
                        coursepName: rep[i].coursepName,
                        studentName: rep[i].studentName,
                        yesApply:false,
                        noApply:false
                        })
                }
                this.setState({
                    tDate: json,
                    loading:false
                })

            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
    applyYes(index){
        let changeDate=this.state.tDate
        changeDate[index].yesApply=true;
        this.setState({tDate:changeDate})
        fetch(config.base+"apply/pass",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+changeDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        changeDate[index].yesApply=false;
                        changeDate.splice(index,1)
                        this.setState({tDate:changeDate})
                    }else{
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    changeDate[index].yesApply=false;
                    this.setState({tDate:changeDate})
                })
    }
    applyNo(index){
        let changeDate=this.state.tDate
        changeDate[index].noApply=true;
        this.setState({tDate:changeDate})
        fetch(config.base+"apply/reject",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+changeDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        changeDate[index].noApply=false;
                        changeDate.splice(index,1)
                        this.setState({tDate:changeDate})
                    }else{
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    changeDate[index].noApply=false;
                    this.setState({tDate:changeDate})
                })
    }
    componentDidMount() {
        this.getApplylist()
    }
    render() {
        const tDate=this.state.tDate;
        const columns = [{
            title: '学员名称',
            width: '30%',
            dataIndex: 'coursepName'
        }, {
            title: '报名课程',
            width: '30%',
            dataIndex: 'studentName',
        }, {
            title: '操作',
            width: '30%',
            render:(text, record, index)=>{
            	return <div><Button type="primary" htmlType="button" loading={tDate[index].yesApply} onClick={()=>this.applyYes(index)}>通过</Button>&nbsp;&nbsp;<Button type="danger" htmlType="button" loading={tDate[index].noApply} onClick={()=>this.applyNo(index)}>不通过</Button></div>
            }
        }]

        return (
            <Table  columns={columns} dataSource={tDate} bordered pagination={false} loading={this.state.loading}  className="animated fadeInUp " />
        )
    }
}
